<template>
  <div id="c_table" @contextmenu.prevent='showClickMenu($event)' @click='$emit("tableClick",$event)' @mousemove='tableMove($event)'>
    <slot name="customTitle"></slot>
    <div class='scroll-content' id='fixed_content'>
      <div class='table-head'>
        <div class="title task-row">
          <span v-for="(col,index) in columnsData" v-if='index < columnsFixedNums ' :key="`fix-title-${col.dataIndex}`" class="item-txt" :style="[col.style]">
            <template>{{col.noTitle ? '' : col.displayName}}</template>
            <template v-if='col.scopedSlots != undefined && col.scopedSlots.filterDropdown != undefined'>
              <a-popover trigger="click" placement='bottomRight'>
                <template slot="content">
                  <slot name='filterDropdown' :column='col'></slot>
                </template>
                <a-icon type="filter" theme='filled' class='icon-filter'/>
              </a-popover>
            </template>
            <span :class='{"resize-span": col.dataIndex != "selection" && col.dataIndex != "healthStatusType"}' 
              @mousedown='resizeDown($event,col.dataIndex)'></span>
          </span>
        </div>
      </div>
      <div v-if="dataSource.length > 0" class='table-body' ref='ref_fiex_body_scroll' @scroll="fixSysHandleScroll()">
        <ul class="main-content" >
          <li v-show='item.show == undefined || item.show' v-for="(item,index) in dataSource" 
            :key="`fix-row-${item.id}-${index}`" class="task-row" :id='item.id'
            @click="clickListener(item)" @dblclick="dbClickListener(item)">
            <p v-for="(col,colIndex) in columnsData" class="item-txt"   v-if='colIndex < columnsFixedNums'
              :style="[col.style,item.style]" :key="`fix-col-${item.id}-${colIndex}`">
              <a-checkbox v-if="col.type == 'selection' && index != 0" v-model="item.selected" @change="itemSelectedListener()"></a-checkbox>
              <span v-if="col.type != 'selection' && col.slotType == undefined">{{item[col.dataIndex]}}</span>
              <slot :name="col.dataIndex" :index="index" :item="item"></slot>
            </p>
          </li>
        </ul>
      </div>
    </div>
    <div class='scroll-content' id='scroll_content' :style='{"margin-left": getTableMarginLeft()}'>
      <div class='table-head' ref='ref_head_scroll'>
        <div class="title task-row">
          <span v-for="(col,index) in columnsData" v-if='index >= columnsFixedNums' :key="`title-${col.dataIndex}`" class="item-txt" :style="[col.style]">
            <template>{{col.noTitle ? '' : col.displayName}}</template>
            <template v-if='col.scopedSlots != undefined && col.scopedSlots.filterDropdown != undefined'>
              <a-popover trigger="click" placement='bottomRight'>
                <template slot="content">
                  <slot name='filterDropdown' :column='col'></slot>
                </template>
                <a-icon type="filter" theme='filled' class='icon-filter'/>
              </a-popover>
            </template>
            <span :class='{"resize-span": col.dataIndex != "selection" && col.dataIndex != "healthStatusType"}' 
              @mousedown='resizeDown($event,col.dataIndex)'></span>
          </span>
        </div>
      </div>
      <div v-if="dataSource.length > 0" class='table-body' ref="ref_body_scroll" @scroll="sysHandleScroll()">
        <ul class="main-content" >
          <li v-show='item.show == undefined || item.show' v-for="(item,index) in dataSource" 
            :key="`row-${item.id}-${index}`" class="task-row" :id='item.id'
            @click="clickListener(item)" @dblclick="dbClickListener(item)">
            <p v-for="(col,colIndex) in columnsData" class="item-txt"   v-if='colIndex >= columnsFixedNums'
              :style="[col.style,item.style]" :key="`col-${item.id}-${colIndex}`">
              <a-checkbox v-if="col.type == 'selection' && index != 0" v-model="item.selected" @change="itemSelectedListener()"></a-checkbox>
              <span v-if="col.type != 'selection' && col.slotType == undefined">{{item[col.dataIndex]}}</span>
              <slot :name="col.dataIndex" :index="index" :item="item"></slot>
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations,mapGetters } from 'vuex'
  export default {
    name: "customer-table",
    props:{
      columnsData:{
        default:[]
      },
      dataSource:{
        default:[]
      },
      noData:{
        default: ''
      }
    },
    computed: {
      ...mapGetters({
        columnsFixedNums: 'getColumnsFixedNums',
        getTableMarginLeft: 'getTableMarginLeft'
      })
    },
    data () {
      return {
        tipStyle: {
          left: 0,
          top: 0
        },
        allCheck: false
      }
    },
    methods:{
      ...mapMutations(['setPlanTable','setResizeInfo']),
      //表格移动鼠标时,选中行背景变化
      tableMove(e) {
        const findNode = e.path.find(ele => ele.className != undefined && ele.localName == 'li' && 
          ele.className.indexOf('task-row') != -1)
        const id = findNode == undefined ? '' : findNode.id
        
        let preScrollClickNode = document.querySelector('#scroll_content ul.main-content > li.move-row');
        preScrollClickNode != null && (preScrollClickNode.classList.remove('move-row'))
        let preFixedClickNode = document.querySelector('#fixed_content ul.main-content > li.move-row');
        preFixedClickNode != null && (preFixedClickNode.classList.remove('move-row'))
        if (id != undefined && id != '') {
          this.menuIndex = this.dataSource.findIndex(item => item.id == id)
          document.querySelectorAll('#scroll_content ul.main-content > li.task-row')[this.menuIndex].classList.add('move-row')
          document.querySelectorAll('#fixed_content ul.main-content > li.task-row')[this.menuIndex].classList.add('move-row')
        }
      },
      fixSysHandleScroll() {
        this.$refs.ref_body_scroll.scrollTop = this.$refs.ref_fiex_body_scroll.scrollTop
      },
      // 滚动条滚动同步(通过scrollFlag表示避免重复触发)
      sysHandleScroll() {
        this.$refs.ref_head_scroll.scrollLeft = this.$refs.ref_body_scroll.scrollLeft
        this.$refs.ref_fiex_body_scroll.scrollTop = this.$refs.ref_body_scroll.scrollTop
        //滚动高度加上显示高度
        let scrollHeight = this.$refs.ref_body_scroll.scrollTop + this.$refs.ref_body_scroll.clientHeight;
        //内容高度
        let contentHeight = this.$refs.ref_body_scroll.firstChild.clientHeight
        //如果内容滚动超过了99%加载后面的数据
        if (scrollHeight > contentHeight * 0.97) {
          this.setPlanTable()
        }
      },
      //得到点击行的id并返回
      showClickMenu(ev) {
        this.$emit('showMenu',ev)
      },
      dbClickListener: function (row) {
        this.$emit('row-dbClickListener',row)
      },
      clickListener: function (row) {
        this.$emit('row-clickListener',row)
      },
      itemSelectedListener() {
        let nodes = []
        this.dataSource.forEach(ele => {
          if (ele.selected) {
            nodes.push(ele)
          }
        })
        this.$emit('selectChange',nodes);
      },
      resizeDown(ev,key) {
        this.setResizeInfo({
          key,
          x: ev.clientX,
          width: ev.target.offsetParent.clientWidth
        })
      }
    }
  }
</script>
<style scoped lang="less">
.resize-span{
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  padding: 0 5px;
  border-right: 1px solid #dcdcdc;
  cursor: col-resize;
}
.icon-filter{
  font-size:12px;
  padding-left: 8px;
}
.icon-filter /deep/ svg {
  color: #bfbfbf
}
.icon-filter:hover /deep/ svg {
  color: #777
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}
#c_table {
  height: 100%;
  position: relative;
  /deep/ .settingStyle {
    position: absolute;
    right: 0;
    line-height: 54px;
    width: 74px;
    z-index: 9;
    background: #fafafa;
    text-align: center;
  }
  #fixed_content {
    position: absolute;
    .table-body {
      margin-right: -7px;
    }
  }
  #scroll_content .task-row{
    float: left
  }
  .scroll-content {
    overflow: auto;
    overflow-x: hidden;
    height: 100%;
    .table-head {
      margin-bottom: -7px;
      padding-bottom: 0px;
      min-width: 8px;
      overflow: scroll;
    }
    .table-body {
      overflow: scroll;
      background: #fff;
      max-height: calc(100% - 58px);
      .task-row {
        height: 36px
      }
    }
  }
  .title{
    line-height: 54px !important;
    font-weight: 500;
    background:rgba(250,250,250,1);
    span{
      color:#000 !important;
    }
    .item-txt {
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
    }
  }
  .main-content{
    height: 100%;
    float: left;
    box-sizing: border-box;
  }
  .no-data{
    position: relative;
    text-align: center;
    & > p {
      font-size: 14px;
      color: #999999;
      line-height: 54px;
      border-bottom: 1px solid #E8E8E8;
    }
  }
  .task-row{
    position: relative;
    line-height: 36px;
    display: flex;
    cursor: pointer;
    border-bottom: 1px solid rgba(232,232,232,1);
    .item-txt{
      min-width: 60px;
      white-space: nowrap;
      position: relative;
      overflow: hidden;
      padding: 0 10px;
      font-size:14px;
      font-weight:500;
      color:rgba(0,0,0,0.65);
    }
  }
}
</style>